<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>提币管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-select v-model="filters.accountType" clearable placeholder="币种" style="width: 100px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.dateType" clearable placeholder="类型" style="width: 100px;">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.satrtDate" type="datetime" placeholder="开始日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.endDate" type="datetime" placeholder="结束日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
        <el-col :span="12">
          <div id="chartBar" style="width:100%; height:400px;"></div>
        </el-col>
        <el-col :span="12">
          <div id="chartPie" style="width:100%; height:400px;"></div>
        </el-col>
      <el-col :span="24" style="margin-top:50px;margin-left: 10px;font-size: 24px;">
      <el-form>
        <el-form-item style="font-size:24px;">
          公式：
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="withDrawCount" placeholder="充值" @keyup.enter.native="handleSearch"/>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            -
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-input v-model="imputationCount" placeholder="归集" @keyup.enter.native="handleSearch"/>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            -
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-input v-model="fee" placeholder="手续费" @keyup.enter.native="handleSearch"/>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            =
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <el-input v-model="lastCount" placeholder="余额" @keyup.enter.native="handleSearch"/>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-col>
    </el-col>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import util from '../../common/util'
  import API from '../../api/api_finance';
  import moment from 'moment';
  export default{
    data(){
      return {
        filters: {
          txid: '',
          address: '',
          accountType: '',
          dateType: '',
          type: '',
          chartBar: null,
          chartPie: null
        },
        imputationCount: 0,
        withDrawCount: 0,
        lastCount: 0,
        fee: 0,
        options: [{
          value: 'USDT',
          label: 'USDT'
        }, {
          value: 'BITCOIN',
          label: 'BITCOIN'
        },{
          value: 'ETH',
          lable: 'ETH'
        }],
        options2: [{
          value: '1',
          label: '年'
        }, {
          value: '2',
          label: '月'
        }, {
          value: '3',
          label: '日'
        }],
        total: 0,
        MentionMoneyTotalAmount: 0,
        MentionMoneytalMinerFee: 0,
        MentionMoneyTotalReseveFee:0,
        page: 1,
        limit: 10,
        loading: false
      }
    },
    methods: {
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
        this.drawLine(this.MentionMoneyTotalAmount,this.MentionMoneytalMinerFee,this.MentionMoneyTotalReseveFee);
        this.drawChartBar(this.MentionMoneyTotalAmount,this.MentionMoneytalMinerFee,this.MentionMoneyTotalReseveFee);
      },
      formatState: function (row, column) {
        var date = row[column.property];
        if(date==1){
          return "用户充值"
        }else if(date==2){
          return "提币"
        }else if(date==3){
          return "冷钱包=>提币热钱包"
        }else if(date==4){
          return "未知地址=>冷钱包"
        }else if(date==5){
          return "未知地址=>提币热钱包"
        }else if(date==6){
          return "资金归集"
        }else if(date==7){
          return "平台预设地址=>冷钱包"
        }else{
          return "手续费地址收币"
        }
      },
      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
             return "";
        }
         return moment(date*1000).format("YYYY-MM-DD HH:mm:ss");
      },

      filterTag(value, row) {
        return row.type === value;
      },
      search(){
        let that = this;
        let params = {
          coinType : this.filters.accountType,
          startTime : this.filters.satrtDate,
          endTime : this.filters.endDate
        };
        that.loading = true;
        API.getWalletMentionMoney(params).then(function (result) {
          that.loading = false;
          if (result.code===200) {
            that.drawLine(result.data.mentionMoneyTotalAmount,result.data.mentionMoneytalMinerFee,result.data.mentionMoneyTotalReseveFee);
            that.drawChartBar(result.data.mentionMoneyTotalAmount,result.data.mentionMoneytalMinerFee,result.data.mentionMoneyTotalReseveFee);
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      drawLine:function (MentionMoneyTotalAmount,MentionMoneytalMinerFee,MentionMoneyTotalReseveFee){
        this.chartPie = echarts.init(document.getElementById('chartPie'));
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['提币数量', '矿工总费用', '目标地址的比特币数量']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: MentionMoneyTotalAmount, name: '提币数量' },
                { value: MentionMoneytalMinerFee, name: '矿工总费用' },
                { value: MentionMoneyTotalReseveFee, name: '目标地址的比特币数量' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
        },
      drawChartBar:function(MentionMoneyTotalAmount,MentionMoneytalMinerFee,MentionMoneyTotalReseveFee) {
        this.chartBar = echarts.init(document.getElementById('chartBar'));
        this.chartBar.setOption({
          color: ['#003366', '#4cabce', '#e5323e'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['提币数量', '矿工总费用', '目标地址的比特币数量']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['2013', '2014', '2015', '2016']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '提币数量',
              type: 'bar',
              barGap: 0,
              // label: labelOption,
              data: [320, 332, 301, 334]
            },
            {
              name: '矿工总费用',
              type: 'bar',
              // label: labelOption,
              data: [220, 182, 191, 234]
            },
            {
              name: '目标地址的比特币数量',
              type: 'bar',
              // label: labelOption,
              data: [150, 232, 201, 154]
            }
          ]
        });
      },
    },
    mounted() {
      this.handleSearch();
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
